<div id="datepicker" class="grid_17 datepicker">
  <div id="d_top">
    <div id="chart"><!--图表-->
      <%= raw  @graph  %>
    </div>
    <div class="month_div">
      <table width="100%" height="26px" class="p_table">
        <tr>
          <td width="10%"><span id="left_img"><%= image_tag "diy_datepicker/left.jpg", :onclick => "pre_month()", :title => "上一个月"%></span></td>
          <td width="80%"><b id="year_month"><%= t "title_of_#{filter}" %>&nbsp;&nbsp;<%=on.year%>年<%=on.month%>月</b></td>
          <td width="10%"><span id="right_img"><%= image_tag "diy_datepicker/right.jpg", :onclick => "next_month()", :title => "下一个月"%></span></td>
        </tr>
      </table>
    </div>
  </div>
  <div id="d_day">
    <table id="p_table">
      <tr>
        <%['一','二','三','四','五','六','日'].each do |week_day|%>
          <td class="td_week"><%=week_day%></td>
        <%end%>
      </tr>
      <% 6.times do |week|   %>
        <tr>
          <% 7.times do |day| %>
            <td id="day_<%= week %>_<%= day + 1 %>">
              <div class=".day_not_in_the_same_month"></div>
            </td>
          <% end %>
        </tr>
      <% end %>
    </table>
  </div>
  <div class="p_bottom grid_17 alpha omega">
    <div id="today_div" class="grid_5 alpha">
      <div  class="datepicker_bottom_btn btn_left"><span onclick="today()">今日</span></div>
    </div>
    <div id="close_div" class="grid_5 push_7 omega">
      <div class="datepicker_bottom_btn btn_right">关闭</div>
    </div>
    <div id="loding_div"></div>
  </div>
</div>

<script type="text/javascript" charset="utf-8">
  // 初始化日历本
  $(document).ready(function() {
    //console.debug('=================================');
<% Time.days_in_month(on.month).times do |t| %>
  <% d = t.days.since(on.beginning_of_month).to_date %>
  <% w = on.beginning_of_month.to_date == on.beginning_of_year.to_date ? (d.cweek > 10 ? 0 : d.cweek  ) : (d.cweek - on.beginning_of_month.to_date.cweek)  %>
      $('#day_<%= w %>_<%= d.cwday %>').removeClass('day_not_in_the_same_month');
      $('#day_<%= w %>_<%= d.cwday %>').addClass('td_day');
      $('#day_<%= w %>_<%= d.cwday %>').html('<%= escape_javascript yield(d) %>');
      //console.debug("<%= d %>(<%= d.cweek %>) ~ <%= on.beginning_of_month.to_date %>(<%= on.beginning_of_month.to_date.cweek %>) => #day_<%= w %>_<%= d.cwday %>");
<% end %>
    $('#day_<%= Date.today.cweek - Date.today.beginning_of_month.to_date.cweek %>_<%= Date.today.cwday %> a').addClass('today');
  });
  // 上个月
  var pre_month = function() {
    $.ajax({
      url: "<%= xxed_on_orders_url%>",
      data: {
        filter:"<%=filter%>",
        on: '<%= 1.months.ago(on.to_datetime).to_date %>'
      },
      beforeSend: function() {
        $('#left_img').html("<%= escape_javascript loading_image_tag %>");
      }
    });
  }

  // 下个月
  var next_month = function() {
    $.ajax({
      url: "<%= xxed_on_orders_url %>",
      data: {
        filter:"<%=filter%>",
        on: '<%= 1.months.since(on.to_datetime).to_date %>'
      },
      beforeSend: function() {
        $('#right_img').html("<%= escape_javascript  loading_image_tag %>");
      }
    });
  }

  // 今日
  var today = function(){
    $.ajax({
      url: "<%= xxed_on_orders_url%>",
      data: {
        filter:"<%=filter%>",
        on: '<%= Date.today %>'
      },
      beforeSend: function() {
        $('#today_div').html("<%= escape_javascript  loading_image_tag %>");
      }
    });
  }

  // 日期选择
  var select_date = function(obj){
    set_color(obj);
    $.ajax({
      url:"<%= orders_url %>",
      data: {
        filter:"<%=filter%>",
        on:$(obj).attr('date_v'),
        format: 'js'
      }
    });
  }

  // 选择月份
  var select_month = function(year,month) {
    $.ajax({
        url: "<%= xxed_on_orders_url %>",
        data: {
          filter:"<%=filter%>",
          on: year + "-" + month + '-1'
        },
        beforeSend: function() {
           $('#year_month').html("<%= escape_javascript  loading_image_tag %>");
        }
      });
  }

  // 关闭
  $('#close_div').click(function(){
    $('#diy_datepicker').hide(1000);
  });
</script>

